/* 超小屏幕（手机，小于 768px） */
@media (max-width: 768px) {
    /* 头部 */
    nav {

        height: 5.5rem /* 88/16 */;

        background: #d75a45;
    }
    nav .container,
    nav form,
    nav form .row {
        height: 100%;
    }
    nav form .row {
        display: flex;
        align-items: center;
        padding: 0 1.625rem /* 26/16 */;
    }
    nav form a:nth-of-type(1) {
        padding: 0;
        font-size: 2.1875rem /* 35/16 */;
        color: #fff;
        font-weight: bold;

    }
    nav form .form-group {
        height: 3rem /* 48/16 */;
    }
    nav form .form-group,
    nav form .form-group>.form-control {
        margin: 0;
        padding: 0;
    }
    nav form .form-group>.form-control {
        width: 100%;
        height: 100%;
        font-size: 1.125rem /* 18/16 */;
        color: #aeabab;
        text-indent: 1.1875rem /* 19/16 */;
        border-radius: 20px;

    }
    nav form .form-group .form-control~i {
        height: 100%;
        margin-right: .8125rem /* 13/16 */;
        color: #d75a45;
        line-height: 3rem /* 48/16 */;
        text-align: right;
    }
    nav form .form-group~a {
        padding: 0;
        font-size: 1.375rem /* 22/16 */;
        color: #fff;
    }
    /* 脚部 */
    #mobile-footer {

        height: 5.375rem /* 86/16 */;

        margin-top: 1.125rem /* 18/16 */;
        background-color: #fff;
        border-top: 1px solid #dedee1;


    }
    #mobile-footer .container,
    #mobile-footer .container ul {
        height: 100%;
    }
    #mobile-footer .container ul {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: space-between;
    }
    #mobile-footer .container ul li {
        display: flex;
        padding-bottom: .8125rem /* 13/16 */;
        align-items: flex-end;

    }
    #mobile-footer .container ul li>a {
        font-size: 1.3125rem /* 21/16 */;
        color: #919191;
        text-decoration: none;
    }
    #mobile-footer .container ul li>a::before {
        content: '';
        display: block;
        width: 1.75rem /* 28/16 */;
        height: 1.75rem /* 28/16 */;
        margin: 0 auto;
        margin-bottom: .5rem /* 8/16 */;
        background-repeat: no-repeat;
        background-size: 1.75rem /* 28/16 */;
        
    }
    #mobile-footer .container ul li[class$="active"]>a {
        color: #ff5614;
    }

    
    #mobile-footer .container ul li:nth-of-type(1)>a::before {
        background-image: url(../image/mobile/未标题-1.png);
    }
    #mobile-footer .container ul li:nth-of-type(1)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-1-active.png);
    }

    #mobile-footer .container ul li:nth-of-type(2)>a::before {
        background-image: url(../image/mobile/未标题-2.png);
    }
    #mobile-footer .container ul li:nth-of-type(2)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-2-active.png);
    }
    #mobile-footer .container ul li:nth-of-type(3)>a::before {
        background-image: url(../image/mobile/未标题-3.png);
    }
    #mobile-footer .container ul li:nth-of-type(3)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-3-active.png);
    }
    #mobile-footer .container ul li:nth-of-type(4)>a::before {
        background-image: url(../image/mobile/未标题-4.png);
    }
    #mobile-footer .container ul li:nth-of-type(4)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-4-active.png);
    }


    /* 躯干 */

    /* 轮播图 */
    .mobile-banner-content {
        height: 17.3125rem /* 277/16 */;

    }
    .mobile-banner-content .swiper-container,
    .mobile-banner-content .swiper-slide a,
    .mobile-banner-content .swiper-slide a>img {
        width: 100%;
        height: 100%;
    }

    /* 组件 */


    /* 标题组件可重复使用 */
    .mobile-content-title {
        height: 1.75rem /* 28/16 */;


    }
    /* 巧妙地利用了栅格系统 */


    .mobile-content-title .row {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0 2.625rem /* 42/16 */;
    }
    .mobile-content-title .mobile-title-item {
        padding: 0;
        font-size: 0;
        text-align: center;
    }
    .mobile-content-title .mobile-title-item:nth-of-type(1),
    .mobile-content-title .mobile-title-item:nth-of-type(3) {
        height: 1px;
        background-color: #d75a45;

    }
    .mobile-content-title .mobile-title-item:nth-of-type(2) {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-content-title .mobile-title-item i {
        display: inline-block;
        width: 7px;
        height: 7px;
        border: 2px solid #d75a45;
        border-radius: 7px;
    }
    .mobile-content-title .mobile-title-item span {
        font-size: 1.75rem /* 28/16 */;
    }

    /* 盒间距需要单独设置 */
    .mobile-food-content .mobile-content-title {
        padding-top: 2.0625rem /* 33/16 */;
        padding-bottom: 1.8125rem /* 29/16 */;
    }


    /* 美食专题 */
    .mobile-food-content .mobile-food-picture {
        width: 100%;

    }
    .mobile-food-content .mobile-food-picture .mobile-food-item {
        position: relative;
        width: 100%;
        height: 24.375rem /* 390/16 */;
        margin-bottom: 1.25rem /* 20/16 */;
    }
    .mobile-food-content .mobile-food-picture .mobile-food-item:nth-last-of-type(1) {
        margin-bottom: 0 !important;
    }
    .mobile-food-content .mobile-food-picture .mobile-food-item img {
        width: 100%;
        height: 100%;
    }
    .mobile-food-content .mobile-food-picture .mobile-food-item figcaption {
        position: absolute;
        width: 100%;
        height: 3.625rem /* 58/16 */;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
        font-size: 1.5rem /* 24/16 */;
        color: #ffffff;
        text-indent: 16px;
        line-height: 3.625rem /* 58/16 */;
    }

    /* 健康专题 */
    .mobile-health-content .mobile-content-title {
        padding-top: 1.9375rem /* 31/16 */;
        padding-bottom: 1.5rem /* 24/16 */;
    }
    .mobile-health-content .mobile-health-picture .row {
        padding: 0 15px;
        margin-bottom: .4375rem /* 7/16 */;
    }
    .mobile-health-content .mobile-health-picture .row:nth-last-of-type(1) {
        margin-bottom: 0 !important;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item {
        position: relative;
        width: calc((100% - .4375rem /* 7/16 */) / 2);
        height: 12.4375rem /* 199/16 */;
        margin: 0;
        padding: 0;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item:nth-last-of-type(1) {
        margin-left: .4375rem /* 7/16 */;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item img {
        width: 100%;
        height: 100%;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item figcaption {
        position: absolute;
        width: 100%;
        height: 2.8125rem /* 45/16 */;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
        font-size: 1.1875rem /* 19/16 */;
        color: #ffffff;
        text-indent: 11px;
        line-height: 2.8125rem /* 45/16 */;
    }

    /* 喜欢专题 */
    .mobile-like-content .mobile-content-title {
        padding-top: 1.8125rem /* 29/16 */;
        padding-bottom: 1.625rem /* 26/16 */;
    }
    .mobile-like-content .mobile-like-picture {
        height: 10.5rem /* 168/16 */;
    }
    .mobile-like-content .mobile-like-picture .swiper-container {
        width: 100%;
        height: 100%;
        padding: 0 2.3125rem /* 37/16 */;
    }

    .mobile-like-content .mobile-like-picture .swiper-slide {
        position: relative;
        height: 100%;

    }
    .mobile-like-content .mobile-like-picture .swiper-slide img {
        width: 100%;
        height: 100%;
    }
    .mobile-like-content .mobile-like-picture .swiper-slide figcaption {
        position: absolute;
        width: 100%;
        height: 2.4375rem /* 39/16 */;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
        font-size: 1.1875rem /* 19/16 */;
        color: #ffffff;
        line-height: 2.4375rem /* 39/16 */;
        text-indent: .6875rem /* 11/16 */;
    }
    .mobile-like-picture .swiper-slide figcaption span{
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-like-content .mobile-like-picture .swiper-button-prev {
        left: 0;
    }
    .mobile-like-content .mobile-like-picture .swiper-button-next {
        right: 0;
    }

   

}
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) and (max-width: 992px) { 
    /* 头部 */
    nav {

        height: 5.5rem /* 88/16 */;

        background: #d75a45;
    }
    nav .container,
    nav form,
    nav form .row {
        height: 100%;
    }
    nav form .row {
        display: flex;
        align-items: center;
        padding: 0 1.625rem /* 26/16 */;
    }
    nav form a:nth-of-type(1) {
        padding: 0;
        font-size: 2.1875rem /* 35/16 */;
        color: #fff;
        font-weight: bold;

    }
    nav form .form-group {
        height: 3rem /* 48/16 */;
    }
    nav form .form-group,
    nav form .form-group>.form-control {
        margin: 0;
        padding: 0;
    }
    nav form .form-group>.form-control {
        width: 100%;
        height: 100%;
        font-size: 1.125rem /* 18/16 */;
        color: #aeabab;
        text-indent: 1.1875rem /* 19/16 */;
        border-radius: 20px;

    }
    nav form .form-group .form-control~i {
        height: 100%;
        margin-right: .8125rem /* 13/16 */;
        color: #d75a45;
        line-height: 3rem /* 48/16 */;
        text-align: right;
    }
    nav form .form-group~a {
        padding: 0;
        font-size: 1.375rem /* 22/16 */;
        color: #fff;
    }
    /* 脚部 */
    #mobile-footer {

        height: 5.375rem /* 86/16 */;

        margin-top: 1.125rem /* 18/16 */;
        background-color: #fff;
        border-top: 1px solid #dedee1;


    }
    #mobile-footer .container,
    #mobile-footer .container ul {
        height: 100%;
    }
    #mobile-footer .container ul {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: space-between;
    }
    #mobile-footer .container ul li {
        display: flex;
        padding-bottom: .8125rem /* 13/16 */;
        align-items: flex-end;

    }
    #mobile-footer .container ul li>a {
        font-size: 1.3125rem /* 21/16 */;
        color: #919191;
        text-decoration: none;
    }
    #mobile-footer .container ul li>a::before {
        content: '';
        display: block;
        width: 1.75rem /* 28/16 */;
        height: 1.75rem /* 28/16 */;
        margin: 0 auto;
        margin-bottom: .5rem /* 8/16 */;
        background-repeat: no-repeat;
        background-size: 1.75rem /* 28/16 */;
        
    }
    #mobile-footer .container ul li[class$="active"]>a {
        color: #ff5614;
    }

    
    #mobile-footer .container ul li:nth-of-type(1)>a::before {
        background-image: url(../image/mobile/未标题-1.png);
    }
    #mobile-footer .container ul li:nth-of-type(1)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-1-active.png);
    }

    #mobile-footer .container ul li:nth-of-type(2)>a::before {
        background-image: url(../image/mobile/未标题-2.png);
    }
    #mobile-footer .container ul li:nth-of-type(2)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-2-active.png);
    }
    #mobile-footer .container ul li:nth-of-type(3)>a::before {
        background-image: url(../image/mobile/未标题-3.png);
    }
    #mobile-footer .container ul li:nth-of-type(3)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-3-active.png);
    }
    #mobile-footer .container ul li:nth-of-type(4)>a::before {
        background-image: url(../image/mobile/未标题-4.png);
    }
    #mobile-footer .container ul li:nth-of-type(4)[class$="active"]>a::before {
        background-image: url(../image/mobile/未标题-4-active.png);
    }


    /* 躯干 */

    /* 轮播图 */
    .mobile-banner-content {
        height: 17.3125rem /* 277/16 */;

    }
    .mobile-banner-content .swiper-container,
    .mobile-banner-content .swiper-slide a,
    .mobile-banner-content .swiper-slide a>img {
        width: 100%;
        height: 100%;
    }

    /* 组件 */


    /* 标题组件可重复使用 */
    .mobile-content-title {
        height: 1.75rem /* 28/16 */;


    }
    /* 巧妙地利用了栅格系统 */


    .mobile-content-title .row {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0 2.625rem /* 42/16 */;
    }
    .mobile-content-title .mobile-title-item {
        padding: 0;
        font-size: 0;
        text-align: center;
    }
    .mobile-content-title .mobile-title-item:nth-of-type(1),
    .mobile-content-title .mobile-title-item:nth-of-type(3) {
        height: 1px;
        background-color: #d75a45;

    }
    .mobile-content-title .mobile-title-item:nth-of-type(2) {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-content-title .mobile-title-item i {
        display: inline-block;
        width: 7px;
        height: 7px;
        border: 2px solid #d75a45;
        border-radius: 7px;
    }
    .mobile-content-title .mobile-title-item span {
        font-size: 1.75rem /* 28/16 */;
    }

    /* 盒间距需要单独设置 */
    .mobile-food-content .mobile-content-title {
        padding-top: 2.0625rem /* 33/16 */;
        padding-bottom: 1.8125rem /* 29/16 */;
    }


    /* 美食专题 */
    .mobile-food-content .mobile-food-picture {
        width: 100%;

    }
    .mobile-food-content .mobile-food-picture .mobile-food-item {
        position: relative;
        width: 100%;
        height: 24.375rem /* 390/16 */;
        margin-bottom: 1.25rem /* 20/16 */;
    }
    .mobile-food-content .mobile-food-picture .mobile-food-item:nth-last-of-type(1) {
        margin-bottom: 0 !important;
    }
    .mobile-food-content .mobile-food-picture .mobile-food-item img {
        width: 100%;
        height: 100%;
    }
    .mobile-food-content .mobile-food-picture .mobile-food-item figcaption {
        position: absolute;
        width: 100%;
        height: 3.625rem /* 58/16 */;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
        font-size: 1.5rem /* 24/16 */;
        color: #ffffff;
        text-indent: 16px;
        line-height: 3.625rem /* 58/16 */;
    }

    /* 健康专题 */
    .mobile-health-content .mobile-content-title {
        padding-top: 1.9375rem /* 31/16 */;
        padding-bottom: 1.5rem /* 24/16 */;
    }
    .mobile-health-content .mobile-health-picture .row {
        padding: 0 15px;
        margin-bottom: .4375rem /* 7/16 */;
    }
    .mobile-health-content .mobile-health-picture .row:nth-last-of-type(1) {
        margin-bottom: 0 !important;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item {
        position: relative;
        width: calc((100% - .4375rem /* 7/16 */) / 2);
        height: 12.4375rem /* 199/16 */;
        margin: 0;
        padding: 0;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item:nth-last-of-type(1) {
        margin-left: .4375rem /* 7/16 */;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item img {
        width: 100%;
        height: 100%;
    }
    .mobile-health-content .mobile-health-picture .mobile-health-item figcaption {
        position: absolute;
        width: 100%;
        height: 2.8125rem /* 45/16 */;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
        font-size: 1.1875rem /* 19/16 */;
        color: #ffffff;
        text-indent: 11px;
        line-height: 2.8125rem /* 45/16 */;
    }

    /* 喜欢专题 */
    .mobile-like-content .mobile-content-title {
        padding-top: 1.8125rem /* 29/16 */;
        padding-bottom: 1.625rem /* 26/16 */;
    }
    .mobile-like-content .mobile-like-picture {
        height: 10.5rem /* 168/16 */;
    }
    .mobile-like-content .mobile-like-picture .swiper-container {
        width: 100%;
        height: 100%;
        padding: 0 2.3125rem /* 37/16 */;
    }

    .mobile-like-content .mobile-like-picture .swiper-slide {
        position: relative;
        height: 100%;

    }
    .mobile-like-content .mobile-like-picture .swiper-slide img {
        width: 100%;
        height: 100%;
    }
    .mobile-like-content .mobile-like-picture .swiper-slide figcaption {
        position: absolute;
        width: 100%;
        height: 2.4375rem /* 39/16 */;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
        font-size: 1.1875rem /* 19/16 */;
        color: #ffffff;
        line-height: 2.4375rem /* 39/16 */;
        text-indent: .6875rem /* 11/16 */;
    }
    .mobile-like-picture .swiper-slide figcaption span{
        display: inline-block;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-like-content .mobile-like-picture .swiper-button-prev {
        left: 0;
    }
    .mobile-like-content .mobile-like-picture .swiper-button-next {
        right: 0;
    }

 }
 /* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) and (max-width: 1200px) { 
    /* 头部 */
    #header {
        
    }
    #navbar {
        height: 58px;
    }
    #navbar .container,
    #navbar .container .navbar-header {
        height: 100%;
    }
    #navbar {
        padding: 0;
    }
    #navbar .container .navbar-header {
        padding: 10px 0 0 18px;
    }
    .navbar-header a {
        display: inline-block;
        padding: 0;
        font-size: 40px;
        color: #d75a45;
        font-weight: bold;
        line-height: 1;
    }
    #navbar ul {
        margin: 0;
        padding: 0;
        padding: 20px 14px 0 0;
    }
    #navbar ul li  {
        position: relative;
        margin-right: 43px;
        padding-left: 17px;
        line-height: 1;


    }
    #navbar ul li:nth-last-of-type(1) {
        margin-right: 0 !important;
        padding-left: 13px;
    }

    #navbar ul li img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0%,-50%);
    }

    #navbar ul li a {
        position: relative;
        display: inline-block;
        padding: 0;
        font-size: 12px;
        color: #000;
        line-height: 1;

    }
    #subnavbar {
        height: 50px;
        background: #d75a45;
    }
    #subnavbar .container,
    #subnavbar .container ul {
        height: 100%;
    }
    #subnavbar .container ul {
        padding: 14px 0 0 20px;
    }
    #subnavbar ul li {
        padding: 0 43px 0 41px;
    }
    #subnavbar ul li a {
        display: inline-block;
        padding: 0;
        font-size: 18px;
        color: #fff;
    }
    #subnavbar ul li:nth-of-type(1) {
        padding-left: 0 !important;
    }

    #subnavbar ul li::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 20px;
        background-color: #fff;
    }
    #subnavbar ul li:nth-last-of-type(1)::after {
        display: none;
    }
    #subnavbar .container form {
        margin: 0;
        padding: 0;
        padding: 8px 24px 0 0;
    }

    /* 修改样式，参考nyaa样式 */
    .input-group {
        width: 303px;
    }
    .input-group input {
        padding: 0;
        border: 1px solid #d3d3d3;
        border-right: none;
        color: #aeabab;
        text-indent: 9px;
        border-radius: 0;
        
    }
    .input-group input::-webkit-input-placeholder {
        color: #aeabab;
    }
    .input-group-btn {
        width: 56px !important;
        height: 34px;
    }
    .btn-primary {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #f8674f;
        border: none;
        border-radius: 0;
    }
    /* 脚部 */
    #footer {
        

    }
    /* 脚部主要内容 */
    #footer .footer-content {
        height: calc(252px - 76px);
        background-color: #d75a45;
    }
    #footer .footer-content .container,
    #footer .footer-content .container .row {
        height: 100%;
    }
    #footer .footer-content .row div[class*="col-"]  {
        height: 100%;
    }

    #footer .footer-content  h3 {
        margin: 0;
        padding: 0;
        padding-top: 29px;
        font-size: 18px;
        color: #fff;
        font-weight: normal;
    }
    #footer .footer-content  p {

        font-size: 12px;
        color: #fefefe;
        line-height: 24px;
    }
    #footer .footer-about h3::after,
    #footer .footer-contacts h3::after {
        content:  '';
        display: block;
        width: 405px;
        height: 1px;
        margin: 7px 0 6px;
        background-color: #fff;
    }
    #footer .footer-contacts h3::after{
       width: 240px;
    }
    /* 二维码 */
    #footer .footer-wechat {
        padding-top: 23px;
    }
    #footer .footer-wechat img {
        width: 104px;
        height: 104px;
    }
    #footer .footer-wechat figcaption {
        width: 104px;
        margin-top: 15px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
    }


    /* 脚部的底部 */
    #footer .footer-bottom {
        height: 76px;
        background-color: #41332a;
    }
    #footer .footer-bottom .container {
        height: 100%;
    }
    #footer .footer-bottom p,
    #footer .footer-bottom p a
     {
        margin: 0;
        padding: 0;
        font-size: 12px;
        color: #fff;
        line-height: 1;
    }
    #footer .footer-bottom p:nth-of-type(1) {
        margin: 21px 0 16px;
    }
    #footer .footer-bottom p:nth-of-type(1) a {
        position: relative;
        padding: 0 24px 0 28px;
    }
    #footer .footer-bottom p:nth-of-type(1) .first {
        padding-left: 0;
    }
    #footer .footer-bottom p:nth-of-type(1) a::after {
        content: '';
        display: block;
        position: absolute;
        width: 2px;
        height: 13px;
        top: 0;
        right: 0;
        background-color: #cfccca;
    }
    #footer .footer-bottom p:nth-of-type(1) .last::after {
        display: none;
    }
    
    /* 躯干 */

    /* banner区域 */
    .banner-content {
        position: relative;
        height: 339px;
    }
    /* 选项卡 */
    .banner-content #banner-menu {
        width: 215px;
        height: 100%;
        padding-top: 27px;
        margin-top: 9px;
        background-color: #3e3434;
    }


    .banner-content #banner-menu li {
        position: relative;
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 17px;
        color: #ffffff;
        line-height: 50px;
        text-indent: 62px;
        cursor: pointer;
    }
    .banner-content #banner-menu li img {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translate(0,-50%);
    }
    .banner-content #banner-menu li::after {
        content: '>';
        display: block;
        position: absolute;
        top: 0;
        right: 20px;
        color: #fff;
    }


    .banner-content #banner-menu li[class$="active"],
    .banner-content #banner-menu li:hover {
        background-color: #d75a45;
    }


    /* 关联视图 */
    .banner-content .banner-menu-content {
        position: absolute;
        width: 471px;
        height: 100%;
        top: 0;
        left: 215px;
        z-index: 9999;
    }
    .banner-content .banner-menu-item {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding-top: 33px;
        padding-left: 48px;
        background-color: #fff;
        box-shadow: 0px 0px 4px 0px 
        rgba(91, 91, 91, 0.42);
        overflow: hidden;
    }
    .banner-content .banner-menu-item dl {
        margin: 0;
    }
    .banner-content .banner-menu-item dl+dl {
        margin-top: calc(42px - 19px);
    }
    .banner-content .banner-menu-item dt {
        margin-bottom: 15px;
        font-size: 17px;
        color: #d75a45;
        line-height: 1;
    }
    .banner-content .banner-menu-item dd {
        float: left;
        line-height: 1;
    }
    .banner-content .banner-menu-item dd>a {
        display: inline-block;
        margin-right: 18px;
        margin-bottom: 19px;
        font-size: 13px;
        color: #696969;
         

    }

    /* 轮播图 */
    .banner-swiper {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(100% - 215px);
        height: 100%;
        z-index: 1;
    }
    .banner-swiper .swiper-container,
    .banner-swiper .swiper-wrapper,
    .banner-content .swiper-slide,
    .banner-content .swiper-slide a,
    .banner-content .swiper-slide img {
        width: 100%;
        height: 100%;
    }
    .banner-content .swiper-slide a {
        display: block;
    }

    /* 美食专题 */

    /* 盒间距单独设置 */
    .food-content .content-title {
        padding: 49px 0 29px;
    }

    /* 标题组件可重复使用 */

    .content-title .row {
        display: flex;
        align-items: center;
        padding: 0 15px; 
    }
    .content-title .title-item {
        padding: 0;
    }
    .content-title .title-item:nth-of-type(1),
    .content-title .title-item:nth-of-type(3) {
        width: 100%;
        height: 1px;
        background-color: #d75a45;
    }
    .content-title .title-item:nth-of-type(2) {
        display: flex;
        height: 24px;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        color: #252525;
        text-align: center;
    }
    .content-title .title-item:nth-of-type(2)::before,
    .content-title .title-item:nth-of-type(2)::after {
        content: '';
        display: block;

        width: 9px;
        height: 9px;

        border: 2px solid #d75a45;
        border-radius: 9px;

    }

    /* 美食专题图片 */
    /* 快捷操作 m0-a p0-0-0  */
    .food-content .food-content-picture .row{
        padding: 0 15px;
    }

    /* 栅格系统自带padding，需要手动清除 */

    .food-content .food-content-picture .food-content-item {
        height: 407px;
        padding: 0;
    }
    .food-content .food-content-picture .food-content-item:nth-of-type(1) img {
        width: 100%;
        height: 100%;
    }
    /* 用padding设置左右间距 */
    .food-content .food-content-item:nth-of-type(2) {
        padding: 0 10px;
    }
    .food-content .food-content-item .food-picture-item {
        position: relative;
    }
    .food-content .food-content-item .row {
        height: 100%;
    
    
    }

    /* 动态计算h，并保留上间距 */
    .food-content .food-content-item .food-picture-item {
        height: calc((100% - 10px) / 2);
        margin-bottom: 10px !important;
        padding: 0;
    }
    .food-content .food-content-item .food-picture-item:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    .food-content .food-content-item .food-picture-item img {
        width: 100%;
        height: 100%;
    }
    .food-content .food-content-item .food-picture-item figcaption {
        position: absolute;
        width: 100%;
        height: 47px;
        bottom: 0;
        padding-top: 17px;
        background-color: rgba(0, 0, 0, .65);
        font-size: 14px;
        color: #ffffff;
        text-indent: 11px;
    }
    .food-content .food-content-item ul {

        padding: 8px 0 0 21px !important;
    }
    .food-content .food-content-item ul li {

        margin-bottom: 28px;
        list-style: square;
        color: #d75a45;
        line-height: 1;
    }
    .food-content .food-content-item ul li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    .food-content .food-content-item ul a {

        font-size: 14px;
        color: #474747;
        line-height: 1;
    }

    /* 健康专题 */

    /* 健康图文 */
    .health-content .content-title {
        padding: 49px 0 35px;
    }
    .health-content .health-content-picture .row,
    .health-content .health-content-text .row {
        padding: 0 15px;
    }
    .health-content .health-content-picture .health-picture-item,
    .health-content .health-content-text .health-text-item {
        position: relative;
        width: calc((100% - 5px * 3) / 4);

        padding: 0;
        margin-right: 5px;
    }
    .health-content .health-content-picture .health-picture-item {
        height: 150px;
    }
    .health-content .health-content-picture .health-picture-item:nth-last-of-type(1),
    .health-content .health-content-text .health-text-item:nth-last-of-type(1) {
        margin-right: 0;
    }
    .health-content .health-content-picture .health-picture-item img {
        width: 100%;
        height: 100%;
    }
    .health-content .health-content-picture .health-picture-item figcaption {
        position: absolute;
        width: 100%;
        height: 45px;
        bottom: 0;
        padding-top: 15px;
        background-color: rgba(0, 0, 0, .65);
        font-size: 14px;
        color: #ffffff;
        text-indent: 11px;
    }

    /* 健康文章 */
    .health-content .health-content-text {
        margin-top: 11px;
    }
    .health-content .health-content-text .health-text-item {
        padding-left: 16px;
    }
    .health-content .health-content-text .health-text-item li {
       margin-bottom: 22px;

        list-style: square;
        color: #d75a45;
        line-height: 1;
    }
    .health-content .health-content-text .health-text-item li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    .health-content .health-content-text .health-text-item li a {
        font-size: 14px;
        color: #474747;
        line-height: 1;
    }    
    /* 喜欢专题 */
    .like-content {
        margin-bottom: 61px;
    }
    .like-content .content-title {
        padding: 49px 0 49px;
    }
    /* 喜欢图片 */
    .like-content .like-content-picture {
        height: 172px; 
    }
    .like-content .like-content-picture .swiper-container {
        width: 100%;
        height: 100%;
        padding: 0 67px;
    }

    .like-content .like-content-picture .swiper-slide {
        position: relative;
        height: 100%;


    }
    .like-content .like-content-picture .swiper-slide img {
        width: 100%;
        height: 100%;
    }
    .like-content .like-content-picture .swiper-slide figcaption {
        position: absolute;
        width: 100%;
        height: 45px;
        bottom: 0;
        padding-top: 15px;
        background-color: rgba(0, 0, 0, .65);
        font-size: 14px;
        color: #ffffff;
        text-indent: 11px;
    }
    .like-content-picture .swiper-slide figcaption span {
        display: inline-block;
        max-width: 182px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }


    .like-content .like-content-picture .swiper-button-prev {

        background-image: url(../image/home/prev.png);
    }
    .like-content .like-content-picture .swiper-button-next {

        background-image: url(../image/home/next.png);
    }
 }
 /* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { 
    /* 头部 */
    #header {
        
    }
    #navbar {
        height: 58px;
    }
    #navbar .container,
    #navbar .container .navbar-header {
        height: 100%;
    }
    #navbar {
        padding: 0;
    }
    #navbar .container .navbar-header {
        padding: 10px 0 0 18px;
    }
    .navbar-header a {
        display: inline-block;
        padding: 0;
        font-size: 40px;
        color: #d75a45;
        font-weight: bold;
        line-height: 1;
    }
    #navbar ul {
        margin: 0;
        padding: 0;
        padding: 20px 14px 0 0;
    }
    #navbar ul li  {
        position: relative;
        margin-right: 43px;
        padding-left: 17px;
        line-height: 1;


    }
    #navbar ul li:nth-last-of-type(1) {
        margin-right: 0 !important;
        padding-left: 13px;
    }

    #navbar ul li img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0,-50%);
    }

    #navbar ul li a {
        position: relative;
        display: inline-block;
        padding: 0;
        font-size: 12px;
        color: #000;
        line-height: 1;

    }

    #subnavbar {
        height: 50px;
        background: #d75a45;
    }
    #subnavbar .container,
    #subnavbar .container ul {
        height: 100%;
    }
    #subnavbar .container ul {
        padding: 14px 0 0 20px;
    }
    #subnavbar ul li {
        padding: 0 43px 0 41px;
    }
    #subnavbar ul li a {
        display: inline-block;
        padding: 0;
        font-size: 18px;
        color: #fff;
    }
    #subnavbar ul li:nth-of-type(1) {
        padding-left: 0 !important;
    }

    #subnavbar ul li::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 20px;
        background-color: #fff;
    }
    #subnavbar ul li:nth-last-of-type(1)::after {
        display: none;
    }
    #subnavbar .container form {
        margin: 0;
        padding: 0;
        padding: 8px 24px 0 0;
    }

    /* 修改样式，参考nyaa样式 */
    .input-group {
        width: 303px;
    }
    .input-group input {
        padding: 0;
        border: 1px solid #d3d3d3;
        border-right: none;
        color: #aeabab;
        text-indent: 9px;
        border-radius: 0;
        
    }
    .input-group input::-webkit-input-placeholder {
        color: #aeabab;
    }
    .input-group-btn {
        width: 56px !important;
        height: 34px;
    }
    .btn-primary {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #f8674f;
        border: none;
        border-radius: 0;
    }
    /* 脚部 */
    #footer {
        

    }
    /* 脚部主要内容 */
    #footer .footer-content {
        height: calc(252px - 76px);
        background-color: #d75a45;
    }
    #footer .footer-content .container,
    #footer .footer-content .container .row {
        height: 100%;
    }
    #footer .footer-content .row div[class*="col-"]  {
        height: 100%;
    }

    #footer .footer-content  h3 {
        margin: 0;
        padding: 0;
        padding-top: 29px;
        font-size: 18px;
        color: #fff;
        font-weight: normal;
    }
    #footer .footer-content  p {

        font-size: 12px;
        color: #fefefe;
        line-height: 24px;
    }
    #footer .footer-about h3::after,
    #footer .footer-contacts h3::after {
        content:  '';
        display: block;
        width: 405px;
        height: 1px;
        margin: 7px 0 6px;
        background-color: #fff;
    }
    #footer .footer-contacts h3::after{
       width: 240px;
    }
    /* 二维码 */
    #footer .footer-wechat {
        padding-top: 23px;
    }
    #footer .footer-wechat img {
        width: 104px;
        height: 104px;
    }
    #footer .footer-wechat figcaption {
        width: 104px;
        margin-top: 15px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
    }


    /* 脚部的底部 */
    #footer .footer-bottom {
        height: 76px;
        background-color: #41332a;
    }
    #footer .footer-bottom .container {
        height: 100%;
    }
    #footer .footer-bottom p,
    #footer .footer-bottom p a
     {
        margin: 0;
        padding: 0;
        font-size: 12px;
        color: #fff;
        line-height: 1;
    }
    #footer .footer-bottom p:nth-of-type(1) {
        margin: 21px 0 16px;
    }
    #footer .footer-bottom p:nth-of-type(1) a {
        position: relative;
        padding: 0 24px 0 28px;
    }
    #footer .footer-bottom p:nth-of-type(1) .first {
        padding-left: 0;
    }
    #footer .footer-bottom p:nth-of-type(1) a::after {
        content: '';
        display: block;
        position: absolute;
        width: 2px;
        height: 13px;
        top: 0;
        right: 0;
        background-color: #cfccca;
    }
    #footer .footer-bottom p:nth-of-type(1) .last::after {
        display: none;
    }


    /* 躯干 */

    /* banner区域 */
    .banner-content {
        position: relative;
        height: 339px;
    }
    /* 选项卡 */
    .banner-content #banner-menu {
        width: 215px;
        height: 100%;
        padding-top: 27px;
        margin-top: 9px;
        background-color: #3e3434;
    }


    .banner-content #banner-menu li {
        position: relative;
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 17px;
        color: #ffffff;
        line-height: 50px;
        text-indent: 62px;
        cursor: pointer;
    }
    .banner-content #banner-menu li img {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translate(0,-50%);
    }
    .banner-content #banner-menu li::after {
        content: '>';
        display: block;
        position: absolute;
        top: 0;
        right: 20px;
        color: #fff;
    }


    .banner-content #banner-menu li[class$="active"],
    .banner-content #banner-menu li:hover {
        background-color: #d75a45;
    }


    /* 关联视图 */
    .banner-content .banner-menu-content {
        position: absolute;
        width: 471px;
        height: 100%;
        top: 0;
        left: 215px;
        z-index: 9999;
    }
    .banner-content .banner-menu-item {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding-top: 33px;
        padding-left: 48px;
        background-color: #fff;
        box-shadow: 0px 0px 4px 0px 
        rgba(91, 91, 91, 0.42);
        overflow: hidden;
    }
    .banner-content .banner-menu-item dl {
        margin: 0;
    }
    .banner-content .banner-menu-item dl+dl {
        margin-top: calc(42px - 19px);
    }
    .banner-content .banner-menu-item dt {
        margin-bottom: 15px;
        font-size: 17px;
        color: #d75a45;
        line-height: 1;
    }
    .banner-content .banner-menu-item dd {
        float: left;
        line-height: 1;
    }
    .banner-content .banner-menu-item dd>a {
        display: inline-block;
        margin-right: 18px;
        margin-bottom: 19px;
        font-size: 13px;
        color: #696969;
         

    }

    /* 轮播图 */
    .banner-swiper {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(100% - 215px);
        height: 100%;
        z-index: 1;
    }
    .banner-swiper .swiper-container,
    .banner-swiper .swiper-wrapper,
    .banner-content .swiper-slide,
    .banner-content .swiper-slide a,
    .banner-content .swiper-slide img {
        width: 100%;
        height: 100%;
    }
    .banner-content .swiper-slide a {
        display: block;
    }

    /* 美食专题 */

    /* 盒间距单独设置 */
    .food-content .content-title {
        padding: 49px 0 29px;
    }

    /* 标题组件可重复使用 */

    .content-title .row {
        display: flex;
        align-items: center;
        padding: 0 15px; 
    }
    .content-title .title-item {
        padding: 0;
    }
    .content-title .title-item:nth-of-type(1),
    .content-title .title-item:nth-of-type(3) {
        width: 100%;
        height: 1px;
        background-color: #d75a45;
    }
    .content-title .title-item:nth-of-type(2) {
        display: flex;
        height: 24px;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        color: #252525;
        text-align: center;
    }
    .content-title .title-item:nth-of-type(2)::before,
    .content-title .title-item:nth-of-type(2)::after {
        content: '';
        display: block;

        width: 9px;
        height: 9px;

        border: 2px solid #d75a45;
        border-radius: 9px;

    }

    /* 美食专题图片 */
    /* 快捷操作 m0-a p0-0-0  */
    .food-content .food-content-picture .row{
        padding: 0 15px;
    }

    /* 栅格系统自带padding，需要手动清除 */

    .food-content .food-content-picture .food-content-item {
        height: 407px;
        padding: 0;
    }
    .food-content .food-content-picture .food-content-item:nth-of-type(1) img {
        width: 100%;
        height: 100%;
    }
    /* 用padding设置左右间距 */
    .food-content .food-content-item:nth-of-type(2) {
        padding: 0 10px;
    }
    .food-content .food-content-item .food-picture-item {
        position: relative;
    }
    .food-content .food-content-item .row {
        height: 100%;
    
    
    }

    /* 动态计算h，并保留上间距 */
    .food-content .food-content-item .food-picture-item {
        height: calc((100% - 10px) / 2);
        margin-bottom: 10px !important;
        padding: 0;
    }
    .food-content .food-content-item .food-picture-item:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    .food-content .food-content-item .food-picture-item img {
        width: 100%;
        height: 100%;
    }
    .food-content .food-content-item .food-picture-item figcaption {
        position: absolute;
        width: 100%;
        height: 47px;
        bottom: 0;
        padding-top: 17px;
        background-color: rgba(0, 0, 0, .65);
        font-size: 14px;
        color: #ffffff;
        text-indent: 11px;
    }
    .food-content .food-content-item ul {

        padding: 8px 0 0 21px !important;
    }
    .food-content .food-content-item ul li {

        margin-bottom: 28px;
        list-style: square;
        color: #d75a45;
        line-height: 1;
    }
    .food-content .food-content-item ul li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    .food-content .food-content-item ul a {

        font-size: 14px;
        color: #474747;
        line-height: 1;
    }

    /* 健康专题 */

    /* 健康图文 */
    .health-content .content-title {
        padding: 49px 0 35px;
    }
    .health-content .health-content-picture .row,
    .health-content .health-content-text .row {
        padding: 0 15px;
    }
    .health-content .health-content-picture .health-picture-item,
    .health-content .health-content-text .health-text-item {
        position: relative;
        width: calc((100% - 5px * 3) / 4);

        padding: 0;
        margin-right: 5px;
    }
    .health-content .health-content-picture .health-picture-item {
        height: 150px;
    }
    .health-content .health-content-picture .health-picture-item:nth-last-of-type(1),
    .health-content .health-content-text .health-text-item:nth-last-of-type(1) {
        margin-right: 0;
    }
    .health-content .health-content-picture .health-picture-item img {
        width: 100%;
        height: 100%;
    }
    .health-content .health-content-picture .health-picture-item figcaption {
        position: absolute;
        width: 100%;
        height: 45px;
        bottom: 0;
        padding-top: 15px;
        background-color: rgba(0, 0, 0, .65);
        font-size: 14px;
        color: #ffffff;
        text-indent: 11px;
    }

    /* 健康文章 */
    .health-content .health-content-text {
        margin-top: 11px;
    }
    .health-content .health-content-text .health-text-item {
        padding-left: 16px;
    }
    .health-content .health-content-text .health-text-item li {
       margin-bottom: 22px;

        list-style: square;
        color: #d75a45;
        line-height: 1;
    }
    .health-content .health-content-text .health-text-item li:nth-last-of-type(1) {
        margin-bottom: 0;
    }
    .health-content .health-content-text .health-text-item li a {
        font-size: 14px;
        color: #474747;
        line-height: 1;
    }    

    /* 喜欢专题 */
    .like-content {
        margin-bottom: 61px;
    }
    .like-content .content-title {
        padding: 49px 0 49px;
    }
    /* 喜欢图片 */
    .like-content .like-content-picture {
        height: 172px; 
    }
    .like-content .like-content-picture .swiper-container {
        width: 100%;
        height: 100%;
        padding: 0 67px;
    }

    .like-content .like-content-picture .swiper-slide {
        position: relative;
        height: 100%;

    }

    .like-content .like-content-picture .swiper-slide img {
        width: 100%;
        height: 100%;
    }
    .like-content .like-content-picture .swiper-slide figcaption {
        position: absolute;
        width: 100%;
        height: 45px;
        bottom: 0;
        padding-top: 15px;
        background-color: rgba(0, 0, 0, .65);
        font-size: 14px;
        color: #ffffff;
        text-indent: 11px;
    }
    .like-content-picture .swiper-slide figcaption span {
        display: inline-block;
        max-width: 182px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }


    .like-content .like-content-picture .swiper-button-prev {
        background-image: url(../image/home/prev.png);
    }
    .like-content .like-content-picture .swiper-button-next {
        background-image: url(../image/home/next.png);
    }
 }